<template>
  <div style="border-top: 2px solid #2e84e7">
    <div style="height: 35px;  color: white; display: flex; justify-content: center ;align-items: center; width: fit-content; padding: 0 20px 0 10px; position: relative">
      <div style="z-index: 3; background: #2e84e7;position: absolute; left: 8px; top: 0; width: 100%; height: 100%; transform: skew(-20deg);"></div>
      <div style="z-index: 2; position: absolute; right: -12px; top: 0; width: 0; height: 0; border-left: 0; border-left: 30px solid transparent; border-bottom: 35px solid #d5e6fa; transform: skew(-10deg);"></div>
      <div style="z-index: 5; position: absolute; left: 0; top: 0; width: 0; height: 0; border-left: 0; border-right: 13px solid transparent; border-top: 35px solid #2e84e7; "></div>
      <div style="z-index: 10; margin-left: 20px">
        {{ fieldConfig.title }}
      </div>
    </div>
  </div>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'Title1',
  props: {
    fieldConfig: createProps(Object, () => ({title: undefined}))
  }
}
</script>